import React, { Component } from 'react'
import { Select } from 'antd'
import { getChannels } from 'api/channels'
const { Option } = Select
export default class MyChannel extends Component {
  state = {
    channels: [],
  }
  render() {
    return (
      <Select
        style={{ width: 200 }}
        placeholder="请选择频道"
        allowClear
        value={this.props.value}
        onChange={this.props.onChange}
      >
        {this.state.channels.map((item) => (
          <Option key={item.id} value={item.id}>
            {item.name}
          </Option>
        ))}
      </Select>
    )
  }
  //  页面更新时发送请求
  componentDidMount() {
    this.getChannelsList()
  }
  // 获取频道列表数据
  async getChannelsList() {
    const {
      data: { channels },
    } = await getChannels()
    this.setState({
      channels,
    })
  }
}
